<template >
  <div class="u-set">
    <van-row class="g-header">
      <van-col span="1" offset="1">
        <van-icon name="arrow-left" />
      </van-col>
      <van-col span="18">
        <span>设置</span>
      </van-col>
      <van-col span="4">
          <van-popover v-model="showPopover" trigger="click" :actions="actions"  theme="dark"
         placement="bottom-end">
          <template #reference>
              <van-icon name="ellipsis"/>
          </template>
        </van-popover>
      </van-col>
    </van-row>
    <van-row class="u-vip">
      <van-col span="21" offset="1">
        <div class="u-left">
          <div>
            <van-image
              round
              width="3.5rem"
              height="3.5rem"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
              class="u-img"
            />
          </div>
          <div class="text">
            <div class="text-up">剁手党的春天</div>
            <div class="text-down">钻石会员</div>
          </div>
        </div>
      </van-col>
      <van-col span="2">
        <van-icon name="arrow" class="u-icon" />
      </van-col>
    </van-row>
    <van-row class="u-safe">
      <van-col span="21" offset="1">
        <span class="anq">账户安全</span>
      </van-col>
      <van-col span="2">
        <van-icon name="arrow" class="u-icon" />
      </van-col>
    </van-row>
    <van-row class="u-exit">
      <van-col span="24" >
        <span class="anq">退出当前账户</span>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { Icon, Col, Row, Image as VanImage, Popover, Button } from "vant";
export default {
  data() {
    return {
        showPopover: false,
      actions: [
        { text: "首页", icon: "wap-home-o" },
        { text: "分类", icon: "qr" },
        { text: "购物车", icon: "shopping-cart-o" },
        { text: "会员中心", icon: "friends-o" },
      ],
    };
  },
  components: {
    [Icon.name]: Icon,
    [Col.name]: Col,
    [Row.name]: Row,
    [VanImage.name]: VanImage,
    [Popover.name]: Popover,
    [Button.name]:Button
  },
};
</script>

<style  scoped>
.u-set {
  background: #f5f5f5;
  /* position: relative; */
}
.g-header {
  text-align: center;
  height: 3rem;
  color: #6b6b6b;
  line-height: 3rem;
  font-size: 1.1rem;
}
.u-vip {
  background: white;
  height: 5rem;
  line-height: 5rem;
}
.u-icon {
  color: #4aa3e6;
}
.u-left {
  display: flex;
  /* height: 6rem; */
}
.text-up {
  font-size: 0.9rem;
  height: 1rem;
  color: #4aa3e6;
  /* background: yellowgreen; */
}
.text-down {
  font-size: 0.7rem;
  height: 1rem;
  color: #999999;
  /* background: violet; */
}
.u-img {
  margin-top: 0.6rem;
  margin-right: 0.2rem;
}
.text {
  width: 6rem;
  height: 5rem;
  /* background: yellow; */
}
.u-safe {
  background: white;
  height: 2.5rem;
  margin-top: 0.3rem;
  line-height: .5rem;
  /* background: violet; */
}
.anq {
  font-size: 1rem;
}
.u-exit{
    background:#4AA3E6 ;
    height: 4rem;
    line-height: 4rem;
    color: white;
    text-align: center;
    margin-top: 12rem;
    /* position: absolute;
    bottom: 0; */
}
</style>